將樣式區分為全域樣式/區域樣式

全域樣式：大多頁面都會共用到的樣式，reset & variable & maxin ...
區域樣式：限制在單一元件裡使用，不想渲染到其他樣式。

<style scpoed>
</style>

背景

引用的 "bootstrap": "^5.1.3"因為顏色不符合專案需求，要重新宣告 bootstrap variable 的樣式，實作前在查資料看到sass loader，原來 sass-loader 可以免於每個元件都一直重複引入變數。

先了解 SCSS 和 CSS 轉換概念

• 在 APP.vue & main.js 引入，都已經將 SCSS 轉換為 CSS，就沒有變數可以使用。
• 在 vue.config.js 使用 webpack 引入，此時是變數的狀態可供使用。

實際操作

1. 從 bootstrap/scss/_variable.scss 複製一份到 src/assets/scss/custom.scss

2. 調整要修改的樣式，並刪掉後面 !default

$primary:       $green ;
$secondary:     $gray-600 !default;

3. 安裝 node-sass 及 sass-loader

npm install node-sass sass-loader -D

4. 新增 vue.config.js

module.exports = {
    css: {
      loaderOptions: {
        scss: {
          prependData: `@import "@/assets/scss/custom.scss";`
        }
      }
    }
};

npm run serve 就出現錯誤訊息了? 目前還無解，有請大神幫幫忙！！

Syntax Error: SassError: ("primary": #7F977B, "secondary": #6c757d, "success": #7F977B, "info": #0dcaf0, "warning": #ffc107, "danger": #FF725E, "light": #f8f9fa, "dark": #212529) isn't a valid CSS value. ╷ 94 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; │ ^^^^^^^^^^^^^ ╵

參考來源：
https://wcc723.github.io/css/2016/12/17/bootstrap-custom/
https://leahlin912.github.io/2019/06/17/Webpack-在vue專案中引用SCSS/
https://medium.com/unalai/vue-專案中引入-scss-檔案的四種方法-該如何使用呢-9babcd3a4ef1